<div class="row mb-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between">
        <span>快捷操作</span>
        <span id="weather-info">正在获取天气信息...</span>
      </div>
      <div class="card-body">
        <div class="row text-center">
          <div class="col-md-2">
            <a href="/admin/articles" class="btn btn-outline-primary btn-clock">
              <i class="bi bi-file-text"></i>
              文章管理
            </a>
          </div>
          <div class="col-md-2">
            <a href="/admin/categories" class="btn btn-outline-primary btn-clock">
              <i class="bi bi-folder-plus"></i>
              新增分类
            </a>
          </div>
          <div class="col-md-2">
            <a href="/admin/tags" class="btn btn-outline-primary btn-clock">
              <i class="bi bi-tag"></i>
              新增标签
            </a>
          </div>
          <div class="col-md-2">
            <a href="/admin/users" class="btn btn-outline-primary btn-clock">
              <i class="bi bi-folder-plus"></i>
              添加用户
            </a>
          </div>
          <div class="col-md-2">
            <a href="/admin/accesses" class="btn btn-outline-primary btn-clock">
              <i class="bi bi-folder-plus"></i>
              添加资源
            </a>
          </div>
          <div class="col-md-2">
            <a href="/admin/settings" class="btn btn-outline-primary btn-clock">
              <i class="bi bi-gear"></i>
              系统设置
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mb-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between">
        <span>系统概览</span>
      </div>
      <div class="card-body">
        <div class="row text-center">
          <div class="col-md-3">
            <div class="card text-black">
              <div class="card-body">
                <h5>用户总数</h5>
                <p class="card-text">{{userCount}}</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card text-black">
              <div class="card-body">
                <h5>文章总数</h5>
                <p class="card-text">{{articleCount}}</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card text-black">
              <div class="card-body">
                <h5>分类总数</h5>
                <p class="card-text">{{categoryCount}}</p>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card text-black">
              <div class="card-body">
                <h5>标签总数</h5>
                <p class="card-text">{{tagCount}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mb-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between">
        <span>最新数据</span>
      </div>
      <div class="card-body">
        <div class="row text-center">
          <div class="col-md-3">
            <div class="card text-black">
              <div class="card-body">
                <h5>用户总数</h5>
                <ul class="list-group list-group-flush">
                  {{#each latestUsers}}
                  <li class="list-group-item">
                    <a href="/admin/users/{{id}}">{{username}}</a>
                    <span class="float-right">{{fromNow createAt}}</span>
                  </li>
                  {{/each}}
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card text-black">
              <div class="card-body">
                <h5>文章总数</h5>
                <ul class="list-group list-group-flush">
                  {{#each latestArticles}}
                  <li class="list-group-item">
                    <a href="/admin/articles/{{id}}">{{title}}</a>
                    <span class="float-right">{{fromNow createAt}}</span>
                  </li>
                  {{/each}}
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card text-black">
              <div class="card-body">
                <h5>分类总数</h5>
                <ul class="list-group list-group-flush">
                  {{#each latestCategories}}
                  <li class="list-group-item">
                    <a href="/admin/categories/{{id}}">{{name}}</a>
                    <span class="float-right">{{fromNow createAt}}</span>
                  </li>
                  {{/each}}
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="card text-black">
              <div class="card-body">
                <h5>标签总数</h5>
                <ul class="list-group list-group-flush">
                  {{#each latestTags}}
                  <li class="list-group-item">
                    <a href="/admin/tags/{{id}}">{{name}}</a>
                    <span class="float-right">{{fromNow createAt}}</span>
                  </li>
                  {{/each}}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row mb-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between">
        <span>内容报表</span>
      </div>
      <div class="card-body">
        <div class="row text-center">
          <div class="col-md-6">
            <div id="usersThreadChart" style="width: 100%; height: 400px;"></div>
          </div>
          <div class="col-md-6">
            <div id="articlesThreadChart" style="width: 100%; height: 400px;"></div>
          </div>
          <div class="col-md-6">
            <div id="categoriesThreadChart" style="width: 100%; height: 400px;"></div>
          </div>
          <div class="col-md-6">
            <div id="tagsThreadChart" style="width: 100%; height: 400px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mb-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">系统实时状态</div>
      <div class="card-body" id="systemInfo">
        <div>正在读取系统状态数据</div>
      </div>
    </div>
  </div>
</div>
<script>
  const usersThreadChart = echarts.init(document.getElementById('usersThreadChart'))
  const usersThreadOptions = {
    title: { text: '用户增长趋势' },
    xAxis: {
      type: 'category',
      data: {{{ json usersTrend.dates }}}
    },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: {{{ json usersTrend.counts }}},
    type: 'line'
    }
  ]
  }
  usersThreadChart.setOption(usersThreadOptions)

  const articlesThreadChart = echarts.init(document.getElementById('articlesThreadChart'))
  const articlesThreadOptions = {
    title: { text: '文章增长趋势' },
    xAxis: {
      type: 'category',
      data: {{{ json articlesTrend.dates }}}
    },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: {{{ json articlesTrend.counts }}},
    type: 'bar'
    }
  ]
  }
  articlesThreadChart.setOption(articlesThreadOptions)

  const categoriesThreadChart = echarts.init(document.getElementById('categoriesThreadChart'))
  const categoriesThreadOptions = {
    title: { text: '分类增长趋势' },
    xAxis: {
      type: 'category',
      data: {{{ json categoriesTrend.dates }}}
    },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: {{{ json categoriesTrend.counts }}},
    type: 'bar'
    }
  ]
  }
  categoriesThreadChart.setOption(categoriesThreadOptions)

  const tagsThreadChart = echarts.init(document.getElementById('tagsThreadChart'))
  const tagsThreadOptions = {
    title: { text: '标签增长趋势' },
    xAxis: {
      type: 'category',
      data: {{{ json tagsTrend.dates }}}
    },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: {{{ json tagsTrend.counts }}},
    type: 'line'
    }
  ]
  }
  tagsThreadChart.setOption(tagsThreadOptions)

</script>
<script>
  $(function () {
    $.ajax({
      url: '/admin/weather',
      method: 'get',
      success: function (data) {
        $('#weather-info').text(data.weather)
      },
      error: function (error) {
        $('#weather-info').text(error.message)
      }
    })
  })
</script>
<script>
  console.log(33)
  const eventSource = new EventSource('/admin/systemInfo')
  eventSource.onmessage = function (event) {
    const systemInfo = JSON.parse(event.data)
    console.log(systemInfo)
  }
  eventSource.onerror = function (event) {
    console.log(event.data)
  }
</script>